<!DOCTYPE html>
<!-- Created by 白墨 on 2021/4/17 22:27:55-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/_fragments::head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客发布</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.css" th:href="@{/lib/editormd/css/editormd.css}">
</head>

<body>
<!-- 导航 -->
<nav th:replace="admin/_fragments::menu(1)" class="ui inverted attached segment">
</nav>
<div class="ui attached pointing menu">
  <div class="ui container">
    <div class="right menu" style="margin-right: 150px;">
      <a href="#" th:href="@{/admin/blogs/input}" class="blue active item">发布</a>
      <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
    </div>
  </div>
</div>
<!-- 中间部分 -->
<div class="m-container m-padded-tb-big">
  <div class="ui accordion container">
    <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
      <input type="hidden" name="published" th:value="*{published}">
      <input type="hidden" name="id" th:value="*{id}">
<!--      文章原创/转载/翻译，标题-->
      <div class="ui title required field">
        <div class="ui left labeled input">
          <div class="ui selection compact blue basic dropdown label">
            <input type="hidden" value="原创" id="flag" name="flag" th:value="*{flag}" >
            <i class="dropdown icon"></i>
            <div class="text">原创</div>
            <div class="menu">
              <div class="item flag" data-value="原创">原创</div>
              <div class="item flag" data-value="转载">转载</div>
              <div class="item flag" data-value="翻译">翻译</div>
            </div>
          </div>
          <input type="text" name="title" placeholder="标题" th:value="*{title}">
        </div>
      </div>
      <div class="ui content required field" id="content" th:classappend="${blog.flag!=null&&blog.flag!='原创'?'active':''}">
        <div class="ui left labeled input">
          <label class="ui blue basic label">来源连接</label>
          <input type="text" name="sourceUrl"  th:value="${blog.sourceUrl!=null?blog.sourceUrl:''}" placeholder="文章来源地址">
        </div>
      </div>
      <div class="required field">
        <div id="md-content" style="z-index: 1 !important;">
            <textarea placeholder="博客内容" name="content" style="display: none" th:text="*{content}"></textarea>
        </div>
      </div>

      <div class="two fields">
        <div class="required field">
          <div class="ui left labeled action input">
            <label class="ui compact blue basic label">分类</label>
            <div class="ui fluid selection dropdown">
              <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}:''">
              <i class="dropdown icon"></i>
              <div class="default text">分类</div>
              <div class="menu">
                <div th:each="type:${types}" class="item typeItem" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
              </div>
            </div>
          </div>
        </div>
        <div class="field">
          <div class="ui left labeled action input">
            <label class="ui compact blue basic label">标签</label>
            <div class="ui fluid selection multiple search  dropdown">
              <input type="hidden" name="tagIds" id="tagIds" th:value="${tagIds}">
              <i class="dropdown icon"></i>
              <div class="default text">标签</div>
              <div class="menu">
                <div th:each="tag:${tags}" class="item typeItem" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">java</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="required field">
        <div class="ui left labeled input">
          <label class="ui blue basic label">首图</label>
          <input type="text" name="firstPicture"  th:value="*{firstPicture}" placeholder="首图引用地址">
        </div>
      </div>
      <div class="required field">
        <textarea name="description" th:text="*{description}" placeholder="博客描述..." maxlength="200"></textarea>
      </div>
      <div class="inline fields">
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden">
            <label for="recommend">推荐</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="shareStatement" name="shareStatement" th:checked="*{shareStatement}" class="hidden">
            <label for="shareStatement">版权声明</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" class="hidden">
            <label for="appreciation">赞赏</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="commentEnabled" name="commentEnabled" th:checked="*{commentEnabled}" class="hidden">
            <label for="commentEnabled">评论</label>
          </div>
        </div>
      </div>

      <div class="ui error message"></div>

      <div class="ui right aligned container">
        <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
        <button type="button" id="save-btn" onclick="save()" class="ui blue button">保存</button>
        <button type="button" id="publish-btn" onclick="publish()" class="ui green button">发布</button>
      </div>

    </form>
  </div>
</div>

<br>
<br>

<!-- 底部 -->
<footer th:replace="admin/_fragments::footer" class="ui inverted vertical segment m-padded-tb-massive">

</footer>

<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script>

<script>
  //初始化Markdown编辑器
  var contentEditor;
  $(function() {
    contentEditor = editormd("md-content", {
      width   : "100%",
      height  : 640,
      syncScrolling : "single",
      path    : "/lib/editormd/lib/",
      saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单

      codeFold: true,
      emoji: true,
      taskList: true,
      tocm: true,         // Using [TOCM]
      tex: true,                   // 开启科学公式TeX语言支持，默认关闭
      sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,

      /**上传图片相关配置如下*/
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : "/admin/upload"//后端图片上传的服务地址
    });
  });
  //图标
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });

  $('.ui.dropdown').dropdown({
    on : 'hover'
  });

  let f=$("#flag");
  let f2=$(".flag");
  let c=$("#content");

  //转载文本框的显示
  f2.click(function(){
    //必须设置延时
    setTimeout(function (){
      if (f.val()!="原创"){
        c.addClass("active");
      }else {
        c.removeClass("active");
      }
    },100)

  })

  //除转载来源以外的文本框验证
  $('.ui.form').form({
    fields : {
      title : {
        identifier: 'title',
        rules: [{
          type : 'empty',
          prompt: '提示：请输入博客标题'
        }]
      },
      content : {
        identifier: 'content',
        rules: [{
          type : 'empty',
          prompt: '提示：请输入博客内容'
        }]
      },
      typeId : {
        identifier: 'type.id',
        rules: [{
          type : 'empty',
          prompt: '提示：请输入博客分类'
        }]
      },
      firstPicture : {
        identifier: 'firstPicture',
        rules: [{
          type : 'empty',
          prompt: '提示：请输入博客首图'
        }]
      },
      description : {
        identifier: 'description',
        rules: [{
          type : 'empty',
          prompt: '提示：请输入博客描述'
        }]
      }
    }
  });

  //保存验证
  function save() {
    if (f.val() == "原创") {
      $('[name="sourceUrl"]').val("");
    }
    $('[name="published"]').val(false);
    $('#blog-form').submit();
  }
  //发布验证（转载链接）
  function publish(){
    if ((f.val() != "原创")&&($('[name="sourceUrl"]').val().trim().length == 0)) {
      alert("未标记为原创文章，尊重版权，请填写标题下方的转载来源！\nTips:可以先保存哦")
      return false;
    }
    if (f.val() == "原创") {
      $('[name="sourceUrl"]').val("");
    }
    $('[name="published"]').val(true);
    $('#blog-form').submit();
  }

  $('#newblog-container').load("[[@{/footer/newblog}]]");
</script>
</body>

</html>